<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的评分" name="second">
            <!--数据列表-->
            <div class="table-container">
                <el-table
                        v-loading="loading2"
                        :data="list2"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="activityName"
                            label="投票活动名称"
                            align="center"
                            min-width="150">
                    </el-table-column>

                    <el-table-column
                            label="自评时间"
                            align="center"
                            min-width="150">
                        <template slot-scope="scope">
                            {{ scope.row.selfInputTime }}
                        </template>
                    </el-table-column>

                    <el-table-column
                            align="center"
                            prop="operateSource"
                            label="自评截止时间"
                            min-width="150">
                        <template slot-scope="scope">{{scope.row.selfEndTime}}</template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="operateSource"
                            label="投票截止时间"
                            min-width="150">
                        <template slot-scope="scope">{{scope.row.evaluateEndTime}}</template>
                    </el-table-column>

                    <el-table-column
                            label="状态"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.evaluateState }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="百分制得分"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.actualScore}}</template>
                    </el-table-column>

                    <!--<el-table-column-->
                            <!--label="投票分数"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.evaluateScores }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="200"
                            align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showSelfEvaluate(scope.row)" v-if="scope.row.state == 0 || scope.row.state == 5">填写自评</el-button>
                            <el-button type="text" @click="confirmZP(scope.row)" v-if="scope.row.state == 5">确认自评</el-button>
                            <el-button type="text" v-if="scope.row.state == 10 || scope.row.state == 20" @click="seeZp(scope.row)">自评</el-button>
                            <el-button type="text" v-if="scope.row.state == 10 || scope.row.state == 20" @click="toMxList(scope.row)">结果明细</el-button>
                            <el-button type="text" v-if="scope.row.state == 10 || scope.row.state == 20" @click="toStaffAct(scope.row,'average')">查看平均分</el-button>
                            <el-button type="text" v-if="scope.row.state == 10 || scope.row.state == 20" @click="showTpfx('auId',scope.row)">分析图表</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="total, sizes,prev, pager, next,jumper"
                        :current-page.sync="listQuery2.pageNum"
                        :page-size="listQuery2.pageSize"
                        :page-sizes="[10,15,20]"
                        :total="count2">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="我的投票" name="third">
            <div style="margin-top: 20px">
                <el-form  size="mini" label-width="80px" :inline="true">
                    <el-form-item label="被投人：">
                        <el-cascader
                                :show-all-levels="false"
                                collapse-tags
                                v-model="listQuery3.userId"
                                :options="data3"
                                :props="{ value:'id',label:'name',multiple: true,emitPath:false}"
                                clearable>
                        </el-cascader>
                    </el-form-item>

                    <el-form-item label="投票活动：">
                        <el-input v-model="listQuery3.activityName"></el-input>
                    </el-form-item>

                    <el-form-item >
                        <el-button
                                @click="handleSearchList3()"
                                type="primary">
                            查询
                        </el-button>
                    </el-form-item>
                </el-form>
                <!--搜索-->
                <div>
                    <el-radio-group v-model="listQuery3.evaluateState" @change="handleSearchList3" size="small">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="0">待投票</el-radio-button>
                        <el-radio-button label="10">已投票</el-radio-button>
                        <el-radio-button label="outTime">已过期</el-radio-button>
                        <el-radio-button label="20">已弃权</el-radio-button>
                    </el-radio-group>
                    <el-button size="small" style="width:100px;float:right;" icon="el-icon-s-data" type="success" @click="showTpfx('activityId','')" :disabled="aList.length == 0">投票分析</el-button>
                </div>
            </div>
            <!--数据列表-->
            <div class="table-container">
                <el-table
                        v-loading="loading3"
                        :data="list3"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="activityName"
                            label="投票活动名称"
                            align="center"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            label="部门/被投票人"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">
                            {{scope.row.departName}} - {{scope.row.userRealName}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="百分制评分"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.evaluateScores}}</template>
                    </el-table-column>
                    <el-table-column
                            label="投票截止时间"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.evaluateEndTime}}</template>
                    </el-table-column>

                    <el-table-column
                            align="center"
                            prop="operateSource"
                            label="状态"
                            min-width="100">
                        <template slot-scope="scope">
                            {{scope.row.evaluateState}}
                        </template>
                    </el-table-column>

                    <el-table-column
                            align="center"
                            prop="operateSource"
                            label="投票时间"
                            min-width="100">
                        <template slot-scope="scope">
                            {{scope.row.evaluateTime}}
                        </template>
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="150"
                            align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="toStaffAct(scope.row)" v-if="scope.row.isCanEdit == 1">{{scope.row.state == 0 ? '投票' : '修改投票'}}</el-button>
                            <el-button type="text" @click="toStaffAct(scope.row)" v-else>查看</el-button>
                            <el-button type="text" @click="submit(scope.row)" v-if="scope.row.isCanEdit == 1 && scope.row.state == 0 ">弃票</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange3"
                        @current-change="handleCurrentChange3"
                        layout="total, sizes,prev, pager, next,jumper"
                        :current-page.sync="listQuery3.pageNum"
                        :page-size="listQuery3.pageSize"
                        :page-sizes="[10,15,20]"
                        :total="count3">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>

       <!--自评-->
       <el-dialog
                  :close-on-click-modal="false"
                  title="自评"
                  :visible.sync="dialogVisible"
                  width="600px">
              <el-form  size="mini" label-width="140px" >
                  <el-form-item label="投票名称：" >
                      {{form.activityName}}
                  </el-form-item>
                  <el-form-item :label="item.itemName" v-for="item in form.itemList" :key="item.itemId" >
                      <div v-html="item.evaluateContent"></div>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">关 闭</el-button>
              </span>
          </el-dialog>

      <!--填写自评-->
      <el-dialog
              :close-on-click-modal="false"
              title="填写自评"
              :visible.sync="dialogVisible2"
              width="1000px">
          <el-form  size="mini" label-width="140px" :model="addForm" ref="addForm">
              <el-form-item label="投票名称：" >
                    {{addForm.activityName}}
              </el-form-item>
              <el-form-item :label="item.itemName" v-for="(item,index) in addForm.itemList" :key="item.itemId" :prop="'itemList.'+ index +'.evaluateContent'" :rules="[{ required: true, message: '此项必填', trigger: 'blur' }]" >
                    <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20}" placeholder="请输入内容" v-model="item.evaluateContent"></el-input>
              </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose2" size="small">关 闭</el-button>
              <el-button type="primary" @click="handleConfirm2" :loading="btnLoading" size="small">确 定</el-button>
          </span>
      </el-dialog>


      <!--投票明细-->
      <el-dialog
              :close-on-click-modal="false"
              title="结果明细"
              :visible.sync="dialogVisible4"
              width="900px">
          <!--搜索-->
          <div class="table-container">
              <el-table
                      v-loading="loadingpop"
                      :data="listpop"
                      border
                      style="width: 100%; margin-top: 20px">
                  <el-table-column
                          prop="activityName"
                          label="投票活动名称"
                          align="center"
                          min-width="150">
                  </el-table-column>

                  <el-table-column
                          align="center"
                          prop="operateSource"
                          label="投票时间"
                          min-width="150">
                      <template slot-scope="scope">{{scope.row.evaluateTime }}</template>
                  </el-table-column>

                  <el-table-column
                          label="百分制评分"
                          min-width="100"
                          align="center">
                      <template slot-scope="scope">
                          {{ scope.row.evaluateScores }}
                      </template>
                  </el-table-column>
                  <el-table-column
                          fixed="right"
                          label="操作"
                          min-width="150"
                          align="center">
                      <template slot-scope="scope">
                          <el-button type="text" @click="toStaffAct(scope.row)">查看</el-button>
                      </template>
                  </el-table-column>

              </el-table>
          </div>
          <div style="overflow: hidden">
              <div class="pagination-container">
                  <el-pagination
                          background
                          @size-change="handleSizeChangepop"
                          @current-change="handleCurrentChangepop"
                          layout="total, sizes,prev, pager, next,jumper"
                          :current-page.sync="listQuerypop.pageNum"
                          :page-size="listQuerypop.pageSize"
                          :page-sizes="[10,15,20]"
                          :total="countpop">
                  </el-pagination>
              </div>
          </div>
      </el-dialog>

      <!--投票分析-->
      <el-dialog
              :close-on-click-modal="false"
              title="投票分析"
              :visible.sync="dialogVisible5"
              width="600px">
          <div id="template-div">
              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fistTable">
                  <tr class="th">
                      <td>投票人数</td>
                      <td>已投人数</td>
                      <td>未投人数</td>
                      <td>弃权人数</td>
                      <td v-for="item in xList">{{item}}</td>
                  </tr>
                  <tr>
                      <td>{{evaluateNum}}</td>
                      <td>{{hasEvaluateNum}}</td>
                      <td>{{unEvaluateNum}}</td>
                      <td>{{abstainNum}}</td>
                      <td v-for="item in yList">{{item}}</td>
                  </tr>
              </table>
          </div>

          <el-form size="mini" label-width="80px" :inline="true">
              <el-form-item label="投票活动：" v-if="activeName=='third'">
                 <el-select @change="getActivityChartData('activityId','')" v-model="cutActivityId">
                     <el-option v-for="item in aList" :label="item.activityName" :value="item.activityId" :key="item.activityId"></el-option>
                 </el-select>
              </el-form-item>
          </el-form>
          <div id="myChart" :style="{'height':'550px'}" v-loading="loadingChart"></div>
      </el-dialog>
  </div>
</template>

<script>
    import {activityInfo,listByDept,activityEvaluator,evaluateAnalysis,getUserOption,selfEvaluateInfo,selfEvaluateForm,selfEvaluateSubmit,evaluateList,evaluateSubmit,postSelfEvaluateSure,evaluateInternal,needMyEvaluateActivity} from '@/api/partner'
    import {getDeptList,} from '@/api/management'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery = {
        activityName:'',
        activityState:'',
        pageNum:1,
        pageSize:10,
    };
    const defaultListQuery2 = {
        activityId:'',
        activityName:'',
        departmentId:'',
        evaluateState :'',
        userId:'',
        tab:'my',
        pageNum:1,
        pageSize:10,
    };

    const defaultListQuery3 = {
        activityId:'',
        activityName:'',
        departmentId:'',
        isDepartManage :'',
        userId:'',
        pageNum:1,
        pageSize:10,
        tab:'my',
        evaluateState:'all'
    };

    const defaultlistQuerypop = {
        auId:'',
        pageNum:1,
        pageSize:10,

    };

    const defaultAddForm = {
        activityName:'',
        itemList:[]

    };

    export default {
        name: "index",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                listQuery2:JSON.parse(JSON.stringify(defaultListQuery2)),
                list2:[],
                count2:0,
                loading2:false,

                listQuery3:JSON.parse(JSON.stringify(defaultListQuery3)),
                list3:[],
                count3:0,
                loading3:false,

                userOptionList:[],
                typeList2:[{name:'待投票',code:0},{name:'已投票',code:10},{name:'弃权',code:20}],
                activeName:'second',

                activityId:this.$route.query.activityId,
                info:{},
                data2:[],
                dialogVisible:false,
                form:JSON.parse(JSON.stringify(defaultAddForm)),
                dialogVisible2:false,

                rules:{},
                addForm:JSON.parse(JSON.stringify(defaultAddForm)),
                btnLoading:false,

                listQuerypop:JSON.parse(JSON.stringify(defaultlistQuerypop)),
                listpop:[],
                countpop:0,
                loadingpop:false,
                dialogVisible4:false,
                data3:[],

                dialogVisible5:false,
                loadingChart:false,
                cutActivityId:'',
                aList:[],
                xList:[],
                yList:[],
                abstainNum:'',
                evaluateNum:'',
                hasEvaluateNum:'',
                unEvaluateNum:'',

            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),

        },
        created() {
             this.getList2();
             this.getList3();
             this.getDataList2();
             this.getMyActList();
            // this.getUserOptionList();
            // this.getBuMenList();
        },
        filters: {
          fifState(val) {
               if(val == 0 ){
                 return '未开始'
               }else if(val == 10){
                 return '已取消'
               }else if(val == 20){
                 return '进行中'
               }else if(val == 30){
                 return '已结束'
               }
            },
        },
        methods:{
            getMyActList(){
                return needMyEvaluateActivity().then((res)=>{
                    this.aList = res;
                    this.cutActivityId = res[0]?res[0]['activityId']:''
                })
            },
            showTpfx(type,item){
                this.dialogVisible5 = true;
                this.loadingChart = true;
                this.getActivityChartData(type,item);
            },

            //获取图表数据
            getActivityChartData(type,item){
                let data = {};
                if(type == 'auId'){
                    data.auId = item.auId;
                }else{
                    this.cutActivityId = this.cutActivityId!= '' ? this.cutActivityId : this.aList[0]['activityId'];
                    data.activityId = this.cutActivityId;
                }
                evaluateInternal(data).then((res)=>{
                    this.drawCaiGouCount(res.xList,res.yList);
                    this.xList = res.xList;
                    this.yList = res.yList;
                    this.abstainNum = res.abstainNum;
                    this.evaluateNum = res.evaluateNum;
                    this.hasEvaluateNum = res.hasEvaluateNum;
                    this.unEvaluateNum = res.unEvaluateNum
                })
            },

            //画图表
            drawCaiGouCount(x,y){
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                let option = {
                    tooltip : {
                        trigger: 'axis',
                        formatter: function (params) {
                            var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
                            return params[0].name+'分' + '<br/>'+colorSpan(params[0].color) + params[0].value + '人'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name:'分数区间',
                        nameLocation:'middle',
                        nameGap:40,
                        data: x
                    },
                    yAxis: {
                        type: 'value',
                        name:'投票人数',
                        nameLocation:'middle',
                        nameGap:40,
                        // axisLabel: {
                        //     formatter: (value, index) => {
                        //         if(parseInt(value) > 0){
                        //             return parseInt(value);
                        //         }else{
                        //             return '';
                        //         }
                        //
                        //     }
                        // },
                    },
                    series: [{
                        data: y,
                        type: 'bar',
                        barWidth : 40,//柱图宽度
                    }]
                };
                myChart.setOption(option);
                this.loadingChart = false;
            },

            //确认自评
            confirmZP(item){
                this.$confirm('确认后自评将不可修改并立即生成投票, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {};
                    data.auId = item.auId;
                    postSelfEvaluateSure(data).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.getList2();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            //获取员工下拉选项
            getDataList2(){
                listByDept().then((res)=>{
                    this.data3 = [];
                    this.data3 = this.forTree2(res);
                })
            },

            //去除children.length = 0 的项
            forTree2(list){
                let newList = list;
                if(newList.length){
                    for (let i = 0; i<newList.length; i++){
                        if(newList[i].children && newList[i].children.length > 0){
                            this.forTree2(newList[i].children)
                        }else if(newList[i].children && newList[i].children.length == 0){
                            console.log("newList[i]",newList[i])
                            delete newList[i];
                        }
                    }
                    return newList
                }
            },
            submit(item){
                this.$confirm('确认弃票吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {};
                    data.eId = item.eId;
                    data.isAbstain = 1;
                    evaluateSubmit(data).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.getList3();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },

            //查看投票明细
            toMxList(item){
                this.listQuerypop.auId = item.auId;
                this.handleSearchListpop();
                this.dialogVisible4 = true;
            },

            handleSearchListpop(){
                this.listQuerypop.pageNum = 1;
                this.getListpop();
            },

            //获取活动列表
            getListpop(){
                this.loadingpop = true;
                let data = JSON.parse(JSON.stringify(this.listQuerypop));
                evaluateList(data).then((res)=>{
                    this.listpop = res.list;
                    this.countpop = res.count;
                    this.loadingpop = false;
                }).catch(()=>{
                    this.loadingpop = false;
                })
            },

            handleSizeChangepop(val){
                this.listQuerypop.pageNum = 1;
                this.listQuerypop.pageSize = val;
                this.getListpop();
            },
            handleCurrentChangepop(val){
                this.listQuerypop.pageNum = val;
                this.getListpop();
            },

            //显示填写自评
            showSelfEvaluate(item){
                selfEvaluateForm({activityId:item.activityId}).then((res=>{
                    this.addForm.itemList = res.itemList;
                    this.addForm.activityName = item.activityName;
                    this.addForm.activityId = item.activityId;
                    this.dialogVisible2 = true

                }))
            },
            //关闭填写自评
            handleClose2(){
                this.dialogVisible2 = false;
            },
            //提交自评
            handleConfirm2(){
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let data = {};
                        data.activityId = this.addForm.activityId;
                        data.itemList = [];
                        this.addForm.itemList.forEach((el)=>{
                            data.itemList.push({itemId:el.itemId,evaluateContent:el.evaluateContent})
                        });
                        selfEvaluateSubmit(data).then(()=>{
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.btnLoading = false;
                            this.handleClose2();
                            this.getList2();
                        })

                    }
                })
            },

            //去员工投票页
            toStaffAct(item,type){
                let routeData = this.$router.resolve({name:'staffActivity',query:{eId:item.eId}});
                if(type == 'average'){
                    routeData = this.$router.resolve({name:'staffActivity',query:{auId:item.auId,type:'average'}});
                }
                window.open(routeData.href);
            },

            //显示自评
            seeZp(item){
                this.dialogVisible = true;
                selfEvaluateInfo({auId:item.auId}).then((res)=>{
                     this.form.itemList = res.itemList;
                     this.form.activityName = item.activityName;
                })
            },
            //关闭自评
            handleClose(){
                this.dialogVisible = false;
            },
            //获取部门列表
            getBuMenList(){
                getDeptList().then((res)=>{
                    this.data2 = [];
                    this.data2 = this.forTree(res);
                })
            },
            //去除不要的children
            forTree(list){
                let newList = list;
                if(newList.length){
                    for (let i = 0; i<newList.length; i++){
                        if(newList[i].children && newList[i].children.length > 0){
                            this.forTree(newList[i].children)
                        }else{
                            delete newList[i].children;
                        }
                    }
                    return newList
                }
            },

            //获取员工下拉选项
            getUserOptionList(){
                getUserOption().then((res)=>{
                    this.userOptionList = res;
                })
            },

            getInfo(){
                activityInfo({activityId:this.activityId}).then((res)=>{
                    this.info = res;
                })
            },

          handleClick(){

          },

            handleSearchList2(){
                this.listQuery2.pageNum = 1;
                this.getList2();
            },

            //获取我的评分
            getList2(){
                this.loading2 = true;
                let data = JSON.parse(JSON.stringify(this.listQuery2));
                evaluateAnalysis(data).then((res)=>{
                    this.list2 = res.list;
                    this.count2 = res.count;
                    this.loading2 = false;
                }).catch(()=>{
                    this.loading2 = false;
                })
            },

            handleSizeChange2(val){
                this.listQuery2.pageNum = 1;
                this.listQuery2.pageSize = val;
                this.getList2();
            },
            handleCurrentChange2(val){
                this.listQuery2.pageNum = val;
                this.getList2();
            },


            handleSearchList3(){
                this.listQuery3.pageNum = 1;
                this.getList3();
            },

            //获取投票统计
            getList3(){
                this.loading3 = true;
                let data = JSON.parse(JSON.stringify(this.listQuery3));
                activityEvaluator(data).then((res)=>{
                    this.list3 = res.list;
                    this.count3 = res.count;
                    this.loading3 = false;
                }).catch(()=>{
                    this.loading3 = false;
                })
            },

            handleSizeChange3(val){
                this.listQuery3.pageNum = 1;
                this.listQuery3.pageSize = val;
                this.getList3();
            },
            handleCurrentChange3(val){
                this.listQuery3.pageNum = val;
                this.getList3();
            },




        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
  #template-div{
      margin-bottom:20px;
      table.fistTable{
          border-left:1px solid #EBEEF5;
          border-top: 1px solid #EBEEF5;
      }
      table{
          td{
              border-right:1px solid #EBEEF5;
              border-bottom: 1px solid #EBEEF5;
              font-size:14px;
              padding:8px 0;
              line-height: 20px;
              color:#000;
              text-align: center;
          }
          .th{
              text-align: center;
              font-weight: bold;
              background: #f5f7fa;
          }
          .sub-item-div{
              padding:8px;

          }
      }
  }
</style>
